<!DOCTYPE html>
<html>
<head>

 <!-- Development using http://roadsidewebapp.abhimanyukolakotla.cloudbees.net/ -->
<!-- <script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBUR4AzjmCmia1Ruqo41rEmd2BmcYL-QCc&sensor=true">
</script>
 -->   
 
 <!-- Development using 192.168.0.147:8080/* -->
<!--  
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0q4pzdcoRscjLoTX3SGkyw5u80GAzFus&sensor=true">
</script>
 -->
 <!-- Development using http://localhost:8080/* -->

 <script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true">
</script>
 
 
 <link rel="stylesheet" type="text/css" href="resources/style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script>

   

var center = new google.maps.LatLng(17.385044,78.486671);
var map;

function initialize()
{  
		
	if(navigator.geolocation) {
		
		 navigator.geolocation.getCurrentPosition(currentPositionCallback);
	
		 } else {

		 alert('The browser does not support geolocation');

	}
}
function currentPositionCallback(position) {
	
	// Initialize new Map parameters
	 var locationText = document.getElementById('locationText');
	 console.log("Latitude : "+position.coords.latitude + "  <br>Longitude :  " +position.coords.longitude);
	 locationText.innerHTML = "Latitude : "+position.coords.latitude + "  <br>Longitude :  " +position.coords.longitude;
	 var user_lat_long = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
	 var mapProp = {
			    center: user_lat_long,
			    zoom:18,
			    mapTypeId: google.maps.MapTypeId.ROADMAP,
			    zoomControlOptions: {
			        style: google.maps.ZoomControlStyle.LARGE
			      },
			    mapTypeControlOptions: {
			        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
			      }
			  };
	
	 map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

	 var marker=new google.maps.Marker({
		  position:user_lat_long,
		  animation:google.maps.Animation.BOUNCE
		  });
	  
	  marker.setMap(map);
	
    $.ajax({
			type: 'GET',
			url:"puncture/" + 17.4225019 + "/" + 78.514729 +"/" ,
			//url:"http://localhost:8080/SpringJson/puncture/" + 17.4225019 + "/" + 78.514729 +"/" ,
			//url:"http://localhost:8080/SpringJson/puncture/" + 17.4225019 + "/" + 78.514729 +"/" ,
			//url:"http://192.168.0.147:8080/SpringJson/puncture/" + 17.4225019 + "/" + 78.514729 +"/" ,
			//url:"http://roadsidewebapp.abhimanyukolakotla.cloudbees.net/puncture/" + position.coords.latitude + "/" + position.coords.longitude +"/" ,
			//url:"/puncture/" + position.coords.latitude + "/" + position.coords.longitude +"/" ,
			contentType:"application/javascript",	
			dataType: "json",
			crossDomain:true,
			beforeSend:startAnimation,
			success: result,
			error:error
	}); 
	
}
function error(data, status,exception)
{
	$("#dialog").fadeOut(100);
	alert("Error : " + data.responseText);
	alert("Exception : " + exception);
	alert("Exception : " + status);
}
function startAnimation()
{
	//alert("Starting animation");
	//$("#dialog").fadeIn(300);
}
function result(data)
{
	//$("#dialog").fadeOut(100);
	$("#dialog").hide();
	var mark;
	 $.each(data, function(i,item)
	 {
		 //alert(i + " : " + item.address);
		 mark = new google.maps.Marker({
			  position: new google.maps.LatLng(item.latitude, item.longitude),
			  });			
			mark.setMap(map);
	    });
}
google.maps.event.addDomListener(window, 'load', initialize);

/* function loadScript()
{
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAJOtpAqhgiRhHctZQ1khO8sQdWl1kr8ts&sensor=true&callback=initialize";
  document.body.appendChild(script);
}

 window.onload = loadScript;*/
</script>

<style type="text/css">
@media (max-device-width:480px) and (orientation:portrait) {

#googleMap {
	height:600px;
	max-height:600px;
	margin: 50px 100px;
	}	
}

@media (orientation:landscape) {

#googleMap {
	height:400px;
	#max-height:480px;
	margin: 0px 50px;
 }	
}
</style>
</head>

<body>

<div id="locationText"></div>
<div id="googleMap" ></div>

</body>
</html>



